<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <!-- 以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame. -->
    <title>2013-2017的那些人</title>
    <script type="text/javascript" src="./demo1/resuorce/index/vue.js"></script> <!--在上-->
    <link rel="stylesheet" href="./demo1/resuorce/index/index.css">
    <script type="text/javascript" src="./demo1/resuorce/index/index.js"></script>
    <link rel="stylesheet" href="./demo1/resuorce/index/swiper/dist/css/swiper.min.css">
</head>

<body>
    <div>
        <div id="app">
            <div class="firstStep" v-show="!passRight">
                <!-- <el-button type="primary" @click="open">点击打开</el-button> -->
            </div>
            <div class="contentMain" v-if="passRight">
                <div class="top">
                    <div class="firstTitle">2013-2017的那些人</div>
                    <div class="firstPoetry"><span v-html="poetry"></span></div>
                </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(e,i) in picture">
                            <img class="pictures" :src="'./demo1/resuorce/picture/' + e + '.jpg'"/>
                            <!-- <img class="pictures" src="./demo1/resuorce/picture/0.jpg"/> -->
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
                <div class="contentText">
                    <el-collapse v-model="activeName" accordion>
                        <el-collapse-item :title="item.name" :name="i" v-for="(item,i) in classData" :key="i">
                            <template slot="title">
                                {{item.name}}<i class="el-icon-circle-check" :style="{color: item.willing }"></i>
                            </template>
                            <div class="one">
                                <el-card class="boxCard">
                                    <div class="items">
                                        <div class="main">
                                            <div class="photoText">
                                                <!-- <el-avatar shape="square" :size="200" fit="fill" :src="'./demo1/resuorce/img/' + item.name + '.jpg'"></el-avatar> -->
                                                <el-image class="photo" :src="'./demo1/resuorce/img/' + item.name + '.jpg'" alt="对方未上传照片">
                                                    <div slot="error" class="image-slot">
                                                        <img class="photo" src="./demo1/resuorce/img/未上传图片.jpg"/>
                                                    </div>
                                                </el-image>
                                                <!-- <img class="photo" :src="'./demo1/resuorce/img/' + item.name + '.jpg'" alt="./demo1/resuorce/img/未上传图片.jpg"/> -->
                                                <el-form ref="form" label-width="100px">
                                                    <el-form-item label="电话：">
                                                        {{item.phone}}
                                                    </el-form-item>
                                                    <el-form-item label="地址：">
                                                        {{item.address}}
                                                    </el-form-item>
                                                    <el-form-item label="微信：">
                                                        {{item.weixin}}
                                                    </el-form-item>
                                                    <el-form-item label="QQ：">
                                                        {{item.qq}}
                                                    </el-form-item>
                                                    <el-form-item label="邮箱：">
                                                        {{item.email}}
                                                    </el-form-item>
                                                </el-form>
                                                <!-- <div class="information"> -->
                                                    <!-- <div class="name">姓名：{{item.name}}</div> -->
                                                    <!-- <div class="phone">电话：{{item.phone}}</div>
                                                    <div class="address">地址：{{item.address}}</div>
                                                    <div class="weixin">微信：{{item.weixin}}</div>
                                                    <div class="qq">QQ：{{item.qq}}</div>
                                                    <div class="email">邮箱：{{item.email}}</div> -->
                                                <!-- </div> -->
                                            </div>
                                            <div class="textContent">
                                                <el-form ref="form" label-width="150px">
                                                    <el-form-item label="状态：">
                                                        {{item.status}}
                                                    </el-form-item>
                                                    <el-form-item label="阶段/职位：">
                                                        {{item.stage}}
                                                    </el-form-item>
                                                    <el-form-item label="单位/地点：">
                                                        {{item.workPlace}}
                                                    </el-form-item>
                                                    <el-form-item label="短期计划：">
                                                        <span v-html="item.shorPlan"></span>
                                                    </el-form-item>
                                                    <el-form-item label="长期计划：">
                                                        <span v-html="item.mediumPlan"></span>
                                                    </el-form-item>
                                                    <el-form-item label="梦想：">
                                                        <span v-html="item.dream"></span>
                                                    </el-form-item>
                                                    <el-form-item label="爱好：">
                                                        {{item.hobbies}}
                                                    </el-form-item>
                                                    <el-form-item label="婚姻：">
                                                        {{item.marriage}}
                                                    </el-form-item>
                                                    <!-- <el-form-item label="重新建立联系：">
                                                        {{item.willing}}
                                                    </el-form-item> -->
                                                </el-form>
                                                <!-- <div class="status">状态：{{item.status}}</div>
                                                <div class="stage">阶段/职位：{{item.stage}}</div>
                                                <div class="workPlace">单位/地点：{{item.workPlace}}</div>
                                                <div class="shorPlan">短期计划：<span v-html="item.shorPlan"></span></div>
                                                <div class="mediumPlan">长期计划：<span v-html="item.mediumPlan"></span></div>
                                                <div class="dream">梦想：<span v-html="item.dream"></span></div>
                                                <div class="hobbies">爱好：{{item.hobbies}}</div>
                                                <div class="marriage">婚姻：{{item.marriage}}</div>
                                                <div class="willing">是否乐意重新建立联系：{{item.willing}}</div> -->
                                            </div>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </div>
    </div> 
</body>
<script src="./demo1/resuorce/index/swiper/dist/js/swiper.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                passRight: true,
                activeName: '0',
                picture: [1,2,3,4,5,6],
                poetry: '去年今日此门中，人面桃花相映红。<br/>人面不知何处去，桃花依旧笑春风。',
                classData: [
                    {
                        name: '陈亚松',
                        phone: '13697008487',
                        address: '江西南昌',
                        weixin: 'sr970516',
                        qq: '2596895318',
                        email: 'yasongchen@foxmial.com',
                        status: '刚毕业',
                        stage: '硕士',
                        workPlace: '南昌大学',
                        shorPlan: '1）准备考博—南京地湖所博士复试阶段，如果没有考上的话，可能短期内会去事业单位工作或者学习，然会准备今年11-12月份的博士生招生。<br/>2）准备将硕士阶段的工作写一篇文章吧，还没有写，在毕业论文的基础上修修改改。',
                        mediumPlan: '1）博士阶段了解附着藻的附着过程及其对湿地植物或者水生植物的影响，接下来就是控制附着藻类了。<br/>2）博士毕业的话希望能够在大学里呆着吧，我还是比较喜欢新东西的。<br/>3）出去走走看看',
                        dream: '1）在家养鱼，想开发冷水观赏鱼种。<br/>2）想编程，通过植物功能性状建立植物群落的模型模拟。<br/>Earth_online。',
                        hobbies: '唯游戏和美食不可辜负',
                        marriage: '恋爱',
                        willing: '#67C23A'
                    },
                    {
                        name: '付东华',
                        phone: '',
                        address: '江西南昌',
                        weixin: 'donghua125516',
                        qq: '1136557001',
                        email: 'fudonghua@qq.com',
                        status: '工作',
                        stage: '码农',
                        workPlace: '上海浦东新区某科技公司',
                        shorPlan: '明年回南昌好好工作，好好生活，努力运动保持一个良好的身体状况',
                        mediumPlan: '好好工作养家糊口，养成一个良好的运动习惯，找一群志同道合的朋友们做一些有趣的事情，并找机会出去旅游品尝各地美食',
                        dream: '乡下整栋小别墅，养只猫和狗，天气好的季节和喜欢旅游的人出去旅游，和喜欢运动游戏的人一起运动游戏，天气不好的时候好好经营好自己的小窝',
                        hobbies: '打LOL，旅游，运动和撸猫',
                        marriage: '未婚',
                        willing: '#67C23A'
                    },
                    // {
                    //     name: '徐勇兵',
                    //     phone: '18279139301',
                    //     address: '湖北武汉',
                    //     weixin: 'xyb1137291963',
                    //     qq: '1137291963',
                    //     email: '1137291963@qq.com',
                    //     status: '学习',
                    //     stage: '博士',
                    //     workPlace: '中国科学院大学（武汉植物园）',
                    //     shorPlan: '博士毕业',
                    //     mediumPlan: '高校/研究所/企业都有可能',
                    //     dream: '一辈子平平安安无病无灾',
                    //     hobbies: '阅读和旅行',
                    //     marriage: '未婚',
                    //     willing: '是'
                    // },
                    // {
                    //     name: '徐天皓',
                    //     phone: '18270880820',
                    //     address: '江西南昌',
                    //     weixin: '18270880820',
                    //     qq: '953880223',
                    //     email: '953880223@qq.com',
                    //     status: '毕业',
                    //     stage: '快递员',
                    //     workPlace: '德邦物流有限公司',
                    //     shorPlan: '攒点钱，之后去职业培训',
                    //     mediumPlan: '养家糊口，再开家牛或羊肉店',
                    //     dream: '生活无忧，有机会可以到处旅游',
                    //     hobbies: '打游戏，散步，吃美食和旅游',
                    //     marriage: '未婚',
                    //     willing: '是'
                    // },
                    {
                        name: '赵静杰',
                        phone: '18800206760',
                        address: '上海',
                        weixin: '18800206760',
                        qq: '673814140',
                        email: 'zhaojj@shanghaitech.edu.cn',
                        status: '学习',
                        stage: '硕士',
                        workPlace: '上海科技大学',
                        shorPlan: '普罗旺斯的薰衣草',
                        mediumPlan: '',
                        dream: '',
                        hobbies: '',
                        marriage: '恋爱',
                        willing: '#909399'
                    }
                ]
            }
        },
        methods: {
            open() {
                this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                inputPattern: /[a-zA-Z]\w{5,17}$/,//正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。 
                inputErrorMessage: '密码格式不正确'
                }).then(({ value }) => {
                    if(value === "stx131") {
                        this.passRight = true;

                        this.$message({
                            type: 'success',
                            message: '密码正确'
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: '密码错误'
                        });
                    }
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });       
                });
            },
            open1() {
        this.$notify({
          title: '成功',
          message: '这是一条成功的提示消息',
          type: 'success'
        });
      },
    }
    });
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      slidesPerGroup: 1,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    //   effect : 'coverflow',
    //   coverflowEffect: {
    //     rotate: 30,
    //     stretch: 10,
    //     depth: 60,
    //     modifier: 2,
    //     slideShadows : true
    //     },
    });
</script>
<style>
.firstStep {
    margin-top: 100px;
    text-align: center;
}
.top {
    background: #409EFF;
    padding: 15px 0;
    color: #fff;
}
.firstTitle {
    padding-bottom: 7.5px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}
.firstPoetry {
    text-align: center;
    font-size: 14px;
}
.pictures {
    width: 100%;
}
.contentText {
    margin-top: 30px;
}
.el-icon-circle-check {
    margin-left: 15px;
}
.el-collapse {
    margin: 0 auto;
    width: 680px;
    border: 1px solid #EBEEF5
}
.el-collapse-item {
    width: 680px
}
.el-collapse-item__header {
    padding-left: 15px;
    font-size: 20px;
}
.boxCard {
    margin-left: 15px;
    width: 650px;
    min-height: 978px;
}
.el-form-item__label,.el-form-item__content {
    font-size: 16px;
}
.photoText {
    display: flex;
}
.textContent {
    padding-top: 15px; 
}
.photo {
    width: 200px;
    border-radius: 5px;
}
.name {
    font-size: 18px;
}
/* swiper */
.swiper-container {
      width: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
</style>
</html>